<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>调查问卷</title>
    <style>
        body{
            background-image: url("https://image.wjx.cn/images/newbg/oldbg2-bg.jpg");
            background-repeat: round;
        }
        .middle{
            margin: auto;
            width: 75%;
        }
        .top{
            width: 910px;
            margin: auto;
            margin-bottom: -25px;
        }
        .bottom{
            background-color: white;
            width: 910px;
            margin: auto;
        }
        h2{
            color: deepskyblue;
            text-align: center;
            padding: 50px 50px 10px 50px;
        }
        .form{
            padding: 50px 100px;
        }
        .shuru{
            width: 70px;
            border-bottom: 1px solid #dbdbdb;
            border-top: 0px;
            border-left: 0px;
            border-right: 0px;
        }
        input [type='radio']{
            margin: 3px 1px;
            float: left;
        }
        p{
            text-align: left;
        }
        label{
            text-align: left;
        }
        .select{
            width: 100px;
            height: 30px;
        }
        .tijiao{
            background-color: deepskyblue;
            color: white;
            width: 100px;
            height: 40px;
            font-size: large;
            text-align: center;
            margin: 30px 320px;
            border-radius: 10px;
            border: none;
        }
        hr{
            border: 0.5px solid gainsboro;
        }
        textarea{
            width: 200px;
            height: 100px;
            margin: auto;
        }
        .content{
            margin-left: 25px;
        }
    </style>
</head>
<body>
<div class="middle">
    <div class="top">
        <img src="https://image.wjx.cn/images/newbg/oldbg2.jpg">
    </div>
    <div class="bottom">
        <h2>趣味小测试</h2>
        <form class="form">
            <div>
                <p>1、本题考考大家对每月邮寄问卷的日程是否熟记于心。</p>
                <p class="content">我们约定每月分两次寄出当月问卷，请回答：</p>
                <p class="content">第一批寄出日期为当月:<input type="text" class="shuru">日，寄出问卷量为当月的：<input type="text" class="shuru">%</p>
                <p class="content">第二批寄出日期为当月:<input type="text" class="shuru">日，寄出问卷量为当月的：<input type="text" class="shuru">%</p>
            </div>
            <hr>
            <div>
                <p>2、该邮寄问卷了，但是问卷还没有收齐，您会怎么班？</p>
                <input  type="radio" name="ans1" id="ans1" value="A" class="content">
                <label>A</label><br>
                <input  type="radio" name="ans1" id="ans2" value="B" class="content">
                <label>B</label><br>
                <input  type="radio" name="ans1" id="ans3" value="C" class="content">
                <label>C</label><br>
                <!--三个name应该一样，这样才是单选框-->
            </div>
            <hr>
            <div>
                <p>3、比例是多少</p>
                <input type="text" class="content">
                <br>
                <hr>
            </div>
            <div>
                <p>4、您的途径</p>
                <input type="checkbox" value="dianshi" class="content">电视<br>
                <input type="checkbox" value="baozhi" class="content">报纸<br>
                <input type="checkbox" value="pengyouquan" class="content">朋友圈<hr>
            </div>
            <div>
                <p>5、您的建议</p>
                <textarea class="content"></textarea>
            </div>
            <hr>
            <div style="clear: both">
                <p>6、您的满意度</p>
                <select class="select content">
                    <option value="verygood">很满意</option>
                    <option value="good">基本满意</option>
                    <option value="justsoso">一般</option>
                </select>
            </div>
            <hr>
            <div style="width: 710px;height:100px;margin: auto">
                <input class="tijiao" type="submit" value="提交">
            </div>
           <div style="clear: both;width: 710px;height: 100px;margin: auto">
               <hr>
               <p style="text-align: center;font-size: small;margin: 50px">群侠镇  提供技术支持</p>
           </div>
        </form>
    </div>
</div>

</body>
</html>